
<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
    <title>Youtu PHP</title>
    <style>
        #thisImg{
            width: 50%;
        }
        #wrap{
            background-color: floralwhite;
            padding: 2%;
        }
        div.row{
            background-color: darkkhaki;
            padding: 2%;
            text-align: center;
            display: flex;
        }
        div.row span{
            width: 33.3%;
        }
        div.row progress{
            width: 33.3%;
        }
        #imgArea{
            text-align: center;
            padding: 2%;
        }
        #imgArea form{
            margin-top: 2%;
        }
        input#submit{
            width: 20%;
            margin-top:2%;
            background-color: darksalmon;
            border-radius: 10px;
            box-shadow: 0px 0px 10px #8E388E;
        }
        input#file{
            background-color: bisque;
            border-radius: 10px;
            box-shadow: 0px 0px 10px #8E388E;
        }
    </style>
</head>


<body>
<div id="wrap"></div>
<div id="imgArea">
    <img id="thisImg" src="" alt="脸照"/>

    <form action="" method="post" enctype="multipart/form-data">

        <input type="file" name="file" id="file" />
        <br />
        <input id='submit' type="submit" name="submit" value="Submit" />
    </form>
</div>




<!-- 载入依赖库 -->
<script type="text/javascript" src="http://www.leiyier.com/jquery.min.js"></script>
<script>
    window.onload = function(){
        var progress = $('progress');
        $.each(progress,function(key,value){
            var that = value;
            that.value = Number(that.innerHTML);
        });
    };
    function getData(result){
// 在这里对返回的数据进行处理
// console.log(result);
//        取出face对象
        var face = result.face[0];
//        取出个人信息
        var myInfo = {
            '未来的路': face.age,
            '查克拉': face.gender,
            '欢乐度':face.expression,
            '颜值': face.beauty
    };
    // 在页面输出内容
    var wrap = $('#wrap');

    $.each(myInfo,function(key,value){
        var div1 = $('<div class="row"></div>');
        var span1 = $('<span class="column"></span>');
        var span2 = $('<span class="column"></span>');
        var progress1 = $('<progress max="100" value="">'+value+'</progress>');
        span1.text(key + ' : ');
        div1.append(span1,progress1,span2);
        wrap.append(div1);
        $('#response').css('display','none');
    });
    }

</script>
</body>
</html>

<?php

if (($_FILES["file"]["size"] < 1024000)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    } else {

        if(!file_exists("./upload")){
            mkdir("./upload");
        }
        move_uploaded_file($_FILES["file"]["tmp_name"],
            "upload/" . $_FILES["file"]["name"]);
    }
    $filename = $_FILES['file']['name'];
// $url='http://'.$_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"];
    $url = '"http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'].'/upload/'.$filename.'"';//传给页面图片的src
    $imgUrl = getcwd().'/upload/'.$filename;//拼接上传的图片路径，作为优图需要的图片参数url
    if($filename){
        echo "<script>var url = ".$url.";$('#thisImg').attr('src',url);</script>";
    }
} else {
    echo "Invalid file";
};
?>


<?php

// 引入SDK
require('./include.php');
use TencentYoutuyun\Youtu;
use TencentYoutuyun\Conf;
use TencentYoutuyun\Auth;
// 设置APP 鉴权信息
$appid='10034146';
$secretId='AKID7ueiUsVpLtV4fiE7hGrO0iu67tiMLev1';
$secretKey='cid1w8iVYieDe8A2vwHWSMeu2VTEfYWc';
$userid='849732223';


//根据你使用的平台选择一种初始化方式
//优图开放平台初始化
Conf::setAppInfo($appid, $secretId, $secretKey, $userid,conf::API_YOUTU_END_POINT);
//腾讯云初始化
Conf::setAppInfo($appid, $secretId, $secretKey, $userid,conf::API_TENCENTYUN_END_POINT);

//人脸检测接口调用
$uploadRet = YouTu::detectface($imgUrl, 1);
echo "<script>var result = ".json_encode($uploadRet).";getData(result);</script>";//把接口反悔的数据传给js处理。

//
//// 人脸定位 调用demo
//$uploadRet = YouTu::faceshape('test.jpg', 1);
//var_dump($uploadRet);

?>